<template>
  <el-card class="box-card">
      <!-- 头部区域 -->
    <div slot="header" class="clearfix">
        <!-- @tab-click="handleClick" -->
        <!-- 头部左侧内容 -->
      <el-tabs class="tab" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
      </el-tabs>
      <!-- 头部右侧内容 -->
      <div class="right">
          <span @click="setDay">今日</span>
          <span @click="setWeek">本周</span>
          <span @click="setMonth">本月</span>
          <span @click="setYear">本年</span>
          <!-- v-model="value9" -->
          <el-date-picker 
          v-model="date"
          class="date"
          type="daterange"
          size="mini" 
          start-placeholder="开始日期" 
          end-placeholder="结束日期" 
          default-value="2010-10-01"
          value-format="yyyy-MM-dd">
          </el-date-picker>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="cont">
        <el-row :gutter="10">
            <el-col :span="17">
                <!-- 容器 -->
                <div class="charts" ref="charts"></div>
            </el-col>
            <el-col :span="7">
                <h4>门店{{title}}排名</h4>
                <ul>
                    <li>
                        <span class="rindex">1</span>
                        <span class="rcont">肯德基</span>
                        <span class="rvalue">123456</span>
                    </li>
                    <li>
                        <span class="rindex">2</span>
                        <span class="rcont">麦当劳</span>
                        <span class="rvalue">123456</span>
                    </li>
                    <li>
                        <span class="rindex">3</span>
                        <span class="rcont">肯德基</span>
                        <span class="rvalue">123456</span>
                    </li>
                    <li>
                        <span class="rIndex">4</span>
                        <span class="rcont">海底捞</span>
                        <span class="rvalue">123456</span>
                    </li>
                    <li>
                        <span class="rIndex">5</span>
                        <span class="rcont">西贝莜面村</span>
                        <span class="rvalue">123456</span>
                    </li>
                    <li>
                        <span class="rIndex">6</span>
                        <span class="rcont">汉堡王</span>
                        <span class="rvalue">123456</span>
                    </li>
                    <li>
                        <span class="rIndex">7</span>
                        <span class="rcont">肯德基</span>
                        <span class="rvalue">123456</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </div>
  </el-card>
</template>

<script>
// 引入echarts
import echarts from 'echarts';
import dayjs from 'dayjs';
export default {
  name: "",
  data() {
      return {
          activeName:"sale",
        // 收集日历的数据
          date:[],
          myCharts:null,
          data1:[250,52,120,260,330,420,220,160,98,190,88,120],
          data2:[410,52,200,334,390,330,220,110,98,167,123,44],
      }
  },
  mounted() {
        // 初始化echarts实例
        //console.log(echarts,'echarts');
        this.myCharts = echarts.init(this.$refs.charts);
        // 配置数据
        this.myCharts.setOption({
            title:{
                text:"销售额趋势",
            },
            xAxis:{
                type:'category',//均分
                data:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                axisTick:{
                    alignWithLabel:true,
                }
            },
            yAxis:{
                type:"value"
            },
            series:[
                {
                    name:"Direct",
                    type:'bar',
                    barWidth:"40%",
                    data:[410,52,200,334,390,330,220,110,98,167,123,44],
                    color:'blue'
                }
            ],
            // 调试布局
            grid:{
                left:"3%",
                right:"4%",
                bottom:"3%",
                containLabel:true,
            },
            // 提示信息
            tooltip:{
                trigger:"axis",
                axisPointer:{
                    type:"shadow",
                }
            }
        })
  },
  computed:{
    // 计算属性之标题
    title() {
        return this.activeName=="sale"?"销售额":"访问量";
    },
    dd() {
        return this.activeName=="sale"?this.data2:this.data1;
    }
  },
  watch:{
      title() {
        // console.log(123);
        // 重新修改图表的配置数据，如果有新的数值就用新的，没有就用以前的数值
        this.myCharts.setOption({
            title:{
                text:this.title+'趋势'
            },
            series:[
                {
                    name:"Direct",
                    type:'bar',
                    barWidth:"40%",
                    data:this.dd,
                    color:'blue'
                }
            ],
        })
      }
  },
  methods:{
      // 今日
      // 安装day.js
      setDay() {
          const day =dayjs().format('YYYY-MM-DD');
          this.date=[day,day];
      },
      // 本周
      setWeek() {
          const start =dayjs().day(1).format('YYYY-MM-DD');
          const end =dayjs().day(7).format('YYYY-MM-DD');
          this.date=[start,end];
      },
      // 本月
      setMonth() {
          const start =dayjs().startOf('month').format('YYYY-MM-DD');
          const end =dayjs().endOf('month').format('YYYY-MM-DD');
          this.date=[start,end];
      },
      // 本年
      setYear() {
          const start =dayjs().startOf('year').format('YYYY-MM-DD');
          const end =dayjs().endOf('year').format('YYYY-MM-DD');
          this.date=[start,end];
      }
  }

};
</script>

<style scoped>
.box-card {
  margin: 10px 0;
}
.clearfix {
    margin-top: -20px;
    position: relative;
    display:flex;
    justify-content: space-between;
}
.tab {
    width: 100%;
}
.cont {
    margin-top: -20px;
    /* background-color: red; */
}
.cont h4 {
    padding: 0;
    margin-top: -10px;
}
.right {
    position: absolute;
    right: 0px;
    bottom:20px;
}
.date {
    width: 250px;
    margin: 0px 20px;
}
.right span {
    margin: 0px 10px;
    font-size: 14px;
}
.charts {
    width:100%;
    height: 290px;
}
ul {
    list-style: none;
    height: 250px;
    width: 100%;
    padding: 0px;
}
ul li {
    height: 8%;
    margin-top: 20px;
}
ul .rindex {
    float: left;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
}
ul .rIndex {
    float: left;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #fff;
    color: #000;
}
ul .rvalue {
    float: right;
}
ul .rcont {
    padding-left: 30px;
}
</style>